<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="favicon.ico">
    <title>Smalien Demo</title>
    <link rel="stylesheet" href="semantic/dist/semantic.min.css">
    <script>window.jQuery = window.$ = require('jquery');</script>
    <script src="semantic/dist/semantic.min.js"></script>
    <link rel="stylesheet" href="css/demo.css">
    <link rel="stylesheet" href="css/jquery.tipsy.css">
    <link rel="stylesheet" href="../node_modules/jquery-resizable/resizable.css">
</head>
<body>
<h1 class="ui header">
    <img class="ui image" src="logo_transparent.png" alt="image">
    <div class="content">
        Smalien Demo
    </div>
</h1>
<button class="ui secondary circular icon button" id="github_icon">
    <i class="large github icon"></i>
</button>

    <div class="ui internally celled stackable grid">
        <div class="row">
            <div class="ten wide column">
                <div class="ui form">
                    <div class="field">
                        <div class="ui error message hidden" id="err_msg"></div>
                    </div>
                    <div class="field">
                        <div class="fields">
                            <div class="eight wide field">
                                <div class="ui input">
                                    <input type="text" data-content="AAA" placeholder="Input apk path" id="selected-apk">
                                </div>
                            </div>
                            <div class="four wide field">
                                <button class="ui primary button" id="select-apk">Open APK</button>
                            </div>
                            <div class="four wide field">
                                <div class="ui toggle checkbox">
                                    <input type="checkbox" name="public">
                                    <label>PPE</label>
                                </div>
                                <button class="ui secondary button" id="static">Static Analysis</button>
                                <div id="load_states" class="ui inline loader"></div>
<!--                                <button class="ui button" id="frameless-window">Load</button>-->
                            </div>
                        </div>
                    </div>
                    <div class="field">
                        <div class="fields">
                            <div class="eight wide field">
                                <div class="ui input">
                                    <input type="text" placeholder="Input conf path" id="selected-file">
                                </div>
                            </div>
                            <div class="four wide field">
                                <button class="ui primary button" id="select-directory">Open File</button>
                                <button class="ui secondary button" id="load">Load</button>
                            </div>
                            <div class="four wide field">
                                <button class="ui secondary button" id="dynamic">Dynamic Analysis</button>
                            </div>
                        </div>
                    </div>
                    <div id="graph_area">
                        <svg id="graph"><g/></svg>
                    </div>
                    <button id="expand" class="ui basic right floated icon button">
                        <i class="expand icon"></i>
                    </button>
                </div>
            </div>
            <div class="six wide column">
                <table id="source_table" class="ui very basic table">
                    <thead>
                    <tr><th>source</th></tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
                <table id="sink_table" class="ui very basic table">
                    <thead>
                    <tr><th>sink</th></tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
                <div class="ui text" id="terminal">
                    <div class="ui header">Log</div>
                    <div id="terminal_output" class="ui segment">
                    </div>
                </div>
            </div>
        </div>
</div>

<script type="text/javascript">
    require("./js/load.js");
    require('./js/script.js');
    // require('./js/loading.js');
    require('./js/jquery.tipsy.js');
    require('./js/demo.js');
</script>
</body>
</html>
